<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>病历单</title>
    <script src="../js/jquery-2.1.4.min.js"></script>
    <script src="../js/mui.min.js"></script>
    <link href="../css/mui.min.css" rel="stylesheet"/>
    <link rel="stylesheet" href="../css/iconfont.css" />
    <link rel="stylesheet" type="text/css" href="../css/cw.css"/>
    <link rel="stylesheet" type="text/css" href="../css/mui.picker.min.css" />
	<script type="text/javascript" src="../js/mui.picker.min.js"></script>
    <script src="../js/global.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript" src="../js/public.js" ></script>
    <script type="text/javascript" src="../js/app/free-information-order-add.js" ></script>
    <script type="text/javascript" charset="UTF-8">
      	mui.init();
    </script>
    <style type="text/css">
    	.mui-radio input[type=radio]:checked:before {color:#8dc21f;}
     	.mui-radio.mui-left input[type=radio]{left:0px;}
    	.mui-checkbox input[type=checkbox]:before, .mui-radio input[type=radio]:before{font-size:14px;position:relative;top:-5px;}
    	.mui-checkbox.mui-left label, .mui-radio.mui-left label{padding-right:0px;padding-left:25px;}
    	.mui-navigate-right:after{right: 0px;}
    	.mui-radio{margin-right: 10px;}
    	.mui-input-row label {float: left;width: 70px;padding: 11px 0px 11px 15px;}
    	.mui-input-row label~input{width: calc(100% - 70px);}
    	textarea{margin:0px;padding:0px;border:none;}
    	.mui-col-xs-3 .iconfont{display:inline-block;top:9px;-webkit-transform: rotate(-180deg);-moz-transform: rotate(-180deg);}	
    	.mui-col-xs-3{font-size:12px;}
    	.mui-col-xs-3>a{border:1px solid #929292;padding:2px 0px;background:white;width:90%;display: inline-block;}	
    	.mui-popover{height:200px;} 
    	.medicine-list-3>div{background:transparent;}
    	 /*弹窗*/
    	.zhifzzao{display:none;position:fixed;top:0;left: 0;right:0;bottom: 0;background:rgba(0,0,0,.5);z-index: 2;}
    	.zhiftc{display:none;font-size:15px;position:fixed;bottom: 10px;right: 0;left: 0;width:94%;left: 3%;z-index: 5;}
        .mui-table-view-cell{background:white;text-align: center;}
        .colorse{color:#8dc21f}
        .mui-table-view-cell:after{left: 0;}
		.mui-input-row label~textarea {width: 80%;height: 42px;padding-top: 10px;}
    </style>
</head>
<body >
	<header id="header" class="mui-bar mui-bar-nav">
		<i class="mui-icon mui-icon-back mui-action-back"></i>
		<h1 class="mui-title ">病历单</h1>
	</header> 
	<div id="content" class="mui-content"></div>
	<!--弹窗-->
	<div class="zhifzzao"></div>
	<div class="zhiftc">
		<div class="mui-table-view-cell cols colorse photo" style="border-radius: 5px 5px 0 0;"><!-- onclick="openNewpage('free-medicine-list.html')"-->
			从药材库选取
		</div>
		<div class="mui-table-view-cell cols colorse paizhao" style="border-radius:0 0 5px 5px ;"><!-- onclick="openNewpage('free-medicine-zz.html')"-->
			拍照上传
		</div>
		<div class="mui-table-view-cell cols" style="margin-top: 5px;border-radius: 5px;color:#AAAAAA">
			取消
		</div>
	</div>
	<ul class="mui-table-view">
		<li class="mui-input-row">
			<label>姓名：</label>
			<input type="text" class="mui-input-clear name" disabled/>
		</li>
	 </ul>
	<ul class="mui-table-view">
		<li class="mui-input-row">
			<label>性别：</label>
			<input type="text" class="mui-input-clear sex" disabled/>
		</li>
	 </ul>
	<ul class="mui-table-view">
		<li class="mui-input-row">
			<label>身高：</label>
			<input type="number" class="mui-input-clear height" disabled/>
		</li>
	</ul>
	<ul class="mui-table-view">
		<li class="mui-input-row">
			<label>体重：</label>
			<input type="number" class="mui-input-clear weight" disabled/>
		</li>
	</ul>
	<ul class="mui-table-view">
		<li class="mui-input-row">
			<label>年龄：</label>
			<input type="text" class="mui-input-clear age" disabled/>
		</li>
	 </ul>
	 <ul class="mui-table-view">
		<li class="mui-input-row">
			<label>婚否：</label>
			<input type="text" class="mui-input-clear marry" disabled/>
		</li>
	 </ul>
	<ul class="mui-table-view">
		<li class="mui-input-row ">
			<label>民族：</label>
			<input type="text" class="mui-input-clear nation" disabled/>
		</li>
	</ul>
	<ul class="mui-table-view">
		<li class="mui-input-row"> 
			<label>手机：</label>
			<input type="text" class="mui-input-clear phone" disabled/>
		</li>
	</ul>
	<ul class="mui-table-view">
		<li class="mui-input-row">
			<label>住址：</label>
	    	<textarea name="" rows="" cols="0" class="address" disabled></textarea>
		</li>
	</ul>
	<div class="table-view-cell mui-table-view background overflow-h ">
	 	<div class="mui-radio mui-left mui-pull-left">
			<label>初诊</label>
			<input name="radio1" value="0" type="radio" checked>
		</div>
		<div class="mui-radio mui-left mui-pull-left">
			<label>复诊</label>
			<input name="radio1" value="1" type="radio">
		</div>
		<div data-options='{"type":"date"}' class="mui-navigate-right mui-pull-right font-14  time-data">2017-01-01</div>
	</div>
	<div class="table-view-cell background margin-bottom-1">
		<div class="font-14">主诉:</div>
		<textarea name="" rows="5" cols=""placeholder="请在此输入内容..." class="history"></textarea>
	 </div>
	 <div class="table-view-cell">
	 	服药注意事项
	 </div>
	 <div class="overflow-h medicine-list-3">			
		<div class="mui-col-xs-3">
			<a href="#top-1" class="color-000 ">
			<span>服药时间</span>
			<span class="iconfont">&#xe638;</span>
			</a>
		</div>		
		<div class="mui-col-xs-3">
			<a href="#top-2" class="color-000">
			<span>服药次数</span>
			<span class="iconfont">&#xe638;</span>
			</a>
		</div>
		<div class="mui-col-xs-3">
			<a href="#top-3" class="color-000">
			<span>饮食注意</span>
			<span class="iconfont">&#xe638;</span>
			</a>
		</div>	
		<div class="mui-col-xs-3">
			<a href="#top-4" class="color-000">
			<span>运动注意</span>
			<span class="iconfont">&#xe638;</span>
			</a>
		</div>
	</div> 
	<button class="background-y mui-btn-block inf-order-add-btn">确定</button>
	<script type="text/javascript">
		(function($) {
			$.init();
			var result = $('.time-data')[0];
			var btns = $('.time-data');
			btns.each(function(i, btn) {
				btn.addEventListener('tap', function() {
					var optionsJson = this.getAttribute('data-options') || '{}';
					var options = JSON.parse(optionsJson);
					var id = this.getAttribute('id');
					var picker = new $.DtPicker(options);
					picker.show(function(rs) {
						result.innerText = rs.text;
						picker.dispose();
					});
				}, false);
			});
		})(mui);
		$('.cols').on('tap',function(){
	    	$('.zhifzzao').fadeOut(50);
	    	$('.zhiftc').slideUp();
	    });
	</script>
<!--弹出菜单1-->
	<div id="top-1" class="mui-popover"style="max-height:px;">
	<ul class="mui-table-view">
		<li class="mui-table-view-cell">
			<a href="#top-1">饭前</a>
		</li>
		<li class="mui-table-view-cell">
			<a href="#top-1">饭后</a>
		</li>
	</ul>	
	</div>
<!--弹出菜单2-->
	<div id="top-2" class="mui-popover"style="max-height:px;">
	<ul class="mui-table-view">
		<li class="mui-table-view-cell">
			<a href="#top-2">一天一次</a>
		</li>
		<li class="mui-table-view-cell">
			<a href="#top-2">一天两次</a>
		</li>
		<li class="mui-table-view-cell">
			<a href="#top-2">一天三次</a>
		</li>
	</ul>	
	</div>
	<!--弹出菜单3-->
	<div id="top-3" class="mui-popover"style="max-height:px;">
	<ul class="mui-table-view">
		<li class="mui-table-view-cell">
			<a href="#top-3">忌辛辣</a>
		</li>
		<li class="mui-table-view-cell">
			<a href="#top-3">忌辛辣</a>
		</li>
		<li class="mui-table-view-cell">
			<a href="#top-3">忌辛辣</a>
		</li>
		<li class="mui-table-view-cell">
			<a href="#top-3">忌辛辣</a>
		</li>
	</ul>	
	</div>
	<!--弹出菜单4-->
	<div id="top-4" class="mui-popover"style="max-height:px;">
	<ul class="mui-table-view">
		<li class="mui-table-view-cell">
			<a href="#top-4">多运动</a>
		</li>
		<li class="mui-table-view-cell">
			<a href="#top-4">适量运动</a>
		</li>
		<li class="mui-table-view-cell">
			<a href="#top-4">休息</a>
		</li>			
	</ul>	
	</div>
	

</body>
	
		<!--<script type="text/javascript">
	mui('.mui-scroll-wrapper').scroll();
		$(document).ready(function(){
			$(".mui-col-xs-4").on('tap',function(){
				$(this).css({'color':'red'})		
			});	
			$("#top-1 li").on('tap',function(){
				$(".mui-col-xs-3:eq(0) span:eq(0)").text($(this).text())			
			});	
			$("#top-2 li").on('tap',function(){
				$(".mui-col-xs-3:eq(1) span:eq(0)").text($(this).text())			
			});	
			$("#top-3 li").on('tap',function(){
				$(".mui-col-xs-3:eq(2) span:eq(0)").text($(this).text())			
			});
			$("#top-4 li").on('tap',function(){
				$(".mui-col-xs-3:eq(3) span:eq(0)").text($(this).text())			
			});
			
		})
	</script>-->
</html>